<template>
  <div class="py-5">
    <div class="container">
      <div class="row mb-4">
        <div class="col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><NuxtLink to="/">首页</NuxtLink></li>
              <li class="breadcrumb-item"><NuxtLink to="/blog">旅游攻略</NuxtLink></li>
              <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
            </ol>
          </nav>
        </div>
      </div>
      
      <div class="row">
        <div class="col-lg-8">
          <article>
            <div class="text-center mb-4">
              <span class="badge bg-primary mb-3">{{ post.category }}</span>
              <h1 class="fw-bold">{{ post.title }}</h1>
              <div class="text-muted">
                <span class="me-3"><i class="bi bi-person me-1"></i> {{ post.author }}</span>
                <span class="me-3"><i class="bi bi-calendar me-1"></i> {{ post.date }}</span>
                <span class="me-3"><i class="bi bi-eye me-1"></i> {{ post.views }}</span>
                <span><i class="bi bi-chat-dots me-1"></i> {{ post.comments.length }} 评论</span>
              </div>
            </div>
            
            <div class="bg-light mb-5" style="height: 400px;"></div>
            
            <div class="content">
              <p class="lead">
                {{ post.introduction }}
              </p>
              
              <p>
                {{ post.content.paragraph1 }}
              </p>
              
              <blockquote class="bg-light p-4 my-4 border-start border-4 border-primary">
                <p class="fst-italic mb-0">
                  "{{ post.quote }}"
                </p>
              </blockquote>
              
              <p>
                {{ post.content.paragraph2 }}
              </p>
              
              <h2 class="fw-bold mt-5 mb-4">行程安排</h2>
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-light">
                    <tr>
                      <th>天数</th>
                      <th>行程</th>
                      <th>餐饮</th>
                      <th>住宿</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in itinerary" :key="index">
                      <td>第{{ index+1 }}天</td>
                      <td>{{ item.activity }}</td>
                      <td>{{ item.meals }}</td>
                      <td>{{ item.accommodation }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              
              <h2 class="fw-bold mt-5 mb-4">实用贴士</h2>
              <div class="row">
                <div v-for="(tip, index) in tips" :key="index" class="col-md-6 mb-3">
                  <div class="d-flex">
                    <i class="bi bi-lightbulb-fill text-warning me-2 mt-1"></i>
                    <span>{{ tip }}</span>
                  </div>
                </div>
              </div>
              
              <div class="d-flex justify-content-between align-items-center mt-5 pt-4 border-top">
                <div>
                  <span class="me-2">标签:</span>
                  <span v-for="(tag, index) in post.tags" :key="index" class="badge bg-light text-dark me-2">
                    {{ tag }}
                  </span>
                </div>
                <div>
                  <button class="btn btn-outline-primary me-2">
                    <i class="bi bi-share me-1"></i> 分享
                  </button>
                  <button class="btn btn-outline-danger">
                    <i class="bi bi-heart me-1"></i> 收藏
                  </button>
                </div>
              </div>
            </div>
          </article>
          
          <div class="mt-5 pt-4 border-top">
            <h3 class="fw-bold mb-4">评论 ({{ post.comments.length }})</h3>
            
            <div v-for="(comment, index) in post.comments" :key="index" class="border-bottom pb-4 mb-4">
              <div class="d-flex">
                <div class="bg-light rounded-circle me-3" style="width: 50px; height: 50px;"></div>
                <div class="flex-grow-1">
                  <div class="d-flex justify-content-between">
                    <h6 class="mb-1">{{ comment.author }}</h6>
                    <small class="text-muted">{{ comment.date }}</small>
                  </div>
                  <p class="mb-2">{{ comment.content }}</p>
                  <div>
                    <button class="btn btn-sm btn-outline-secondary me-2">
                      <i class="bi bi-hand-thumbs-up me-1"></i> {{ comment.likes }}
                    </button>
                    <button class="btn btn-sm btn-outline-secondary">回复</button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="card border-0 shadow-sm mt-4">
              <div class="card-body">
                <h5 class="fw-bold mb-3">发表评论</h5>
                <form>
                  <div class="mb-3">
                    <textarea class="form-control" rows="4" placeholder="写下您的评论..."></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary">提交评论</button>
                </form>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-lg-4">
          <div class="card border-0 shadow-sm mb-4 sticky-top" style="top: 20px;">
            <div class="card-header bg-white fw-bold">
              <i class="bi bi-person me-2"></i>作者信息
            </div>
            <div class="card-body text-center">
              <div class="bg-light rounded-circle mx-auto mb-3" style="width: 100px; height: 100px;"></div>
              <h5 class="fw-bold">{{ post.author }}</h5>
              <p class="text-muted">资深旅游达人</p>
              <p class="small">
                拥有10年旅游行业经验，足迹遍布全球50多个国家和地区，
                热爱分享旅行中的美好瞬间和实用经验。
              </p>
              <button class="btn btn-outline-primary btn-sm">关注作者</button>
            </div>
          </div>
          
          <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white fw-bold">
              <i class="bi bi-fire me-2"></i>相关文章
            </div>
            <div class="card-body">
              <div v-for="(related, index) in relatedPosts" :key="index" class="d-flex mb-3">
                <div class="bg-light me-3" style="width: 80px; height: 80px;"></div>
                <div>
                  <h6 class="mb-1">
                    <NuxtLink :to="'/blog/' + (index + 20)" class="text-decoration-none">
                      {{ related.title }}
                    </NuxtLink>
                  </h6>
                  <div class="text-muted small">
                    <i class="bi bi-eye me-1"></i> {{ related.views }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

const route = useRoute()
const id = route.params.id

// 模拟文章数据
const post = {
  title: '欧洲十国自由行全攻略',
  author: '旅行达人小王',
  date: '2024-05-15',
  category: '欧洲',
  views: 12500,
  tags: ['欧洲', '自由行', '攻略', '多国'],
  introduction: '这次欧洲十国自由行历时18天，途经英国、法国、瑞士、意大利、德国、荷兰、比利时、奥地利、捷克和匈牙利。行程紧凑但不紧张，既能深度体验各国文化，又有充足的时间欣赏美景。下面我将详细分享这次旅行的经验和攻略。',
  quote: '旅行不仅是身体的移动，更是心灵的成长。每一次出发都是对未知世界的探索，每一段路程都会成为人生中最珍贵的回忆。',
  content: {
    paragraph1: '这次旅行的准备工作从三个月前就开始了。首先是签证，申根签证需要提前预约，建议至少提前一个月申请。机票方面，我选择了往返于伦敦的航班，因为英国不在申根区内，这样可以避开一些热门航线，节省费用。住宿我主要通过Booking和Airbnb预订，提前两个月开始陆续预定，价格相对便宜。',
    paragraph2: '在交通方面，欧洲的火车系统非常发达，我购买了 Eurail Global Pass，可以在22个欧洲国家无限次乘坐火车。这大大节省了交通成本，也让我能更灵活地安排行程。此外，我还下载了DB Navigator、SNCF等各国铁路APP，方便查询时刻表和购买临时车票。'
  },
  comments: [
    {
      author: '张三',
      date: '2024-05-16',
      content: '感谢分享这么详细的攻略！我正计划类似的行程，你的经验对我很有帮助。',
      likes: 24
    },
    {
      author: '李四',
      date: '2024-05-17',
      content: '关于火车通票，有没有更经济的选择？听说有些国家间的火车票提前预订会更便宜。',
      likes: 12
    },
    {
      author: '王五',
      date: '2024-05-18',
      content: '非常实用的攻略！特别是关于签证和住宿的部分，对我这样的新手来说太重要了。',
      likes: 8
    }
  ]
}

const itinerary = [
  { activity: '抵达伦敦，游览大本钟、伦敦眼', meals: '晚餐', accommodation: '伦敦市中心酒店' },
  { activity: '参观大英博物馆，下午前往巴黎', meals: '三餐', accommodation: '巴黎拉丁区民宿' },
  { activity: '游览埃菲尔铁塔、卢浮宫', meals: '三餐', accommodation: '巴黎拉丁区民宿' },
  { activity: '前往瑞士因特拉肯，欣赏阿尔卑斯山景', meals: '三餐', accommodation: '因特拉肯酒店' },
  { activity: '少女峰登山，体验冰雪世界', meals: '三餐', accommodation: '因特拉肯酒店' },
  { activity: '前往意大利米兰，参观大教堂', meals: '三餐', accommodation: '米兰市中心酒店' },
  { activity: '游览威尼斯水城，乘坐贡多拉', meals: '三餐', accommodation: '威尼斯临水酒店' },
  { activity: '罗马斗兽场、许愿池', meals: '三餐', accommodation: '罗马历史区酒店' },
  { activity: '梵蒂冈博物馆、圣彼得大教堂', meals: '三餐', accommodation: '罗马历史区酒店' },
  { activity: '佛罗伦萨乌菲兹美术馆', meals: '三餐', accommodation: '佛罗伦萨酒店' }
]

const tips = [
  '提前兑换欧元和英镑，机场汇率通常不太划算',
  '购买欧洲电话卡，流量充足且价格合理',
  '随身携带转换插头，欧洲插座标准与中国不同',
  '下载Google Maps离线地图，避免在国外流量超支',
  '准备常用药品，如感冒药、止泻药等',
  '穿着舒适的鞋子，每天步行距离可能很长',
  '尊重当地文化和习俗，特别是在宗教场所',
  '保管好护照和贵重物品，建议备份电子版'
]

const relatedPosts = [
  { title: '欧洲火车通行证购买指南', views: 19800 },
  { title: '申根签证申请全攻略', views: 15600 },
  { title: '欧洲购物退税详解', views: 12400 }
]

useHead({
  title: `${post.title} - TravelExplorer`
})
</script>